<!--
多边形
-->
<!DOCTYPE html>
<html>
    <head>
        <title>lineTo</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <div>
            <canvas id="hua" height="200" width="600" style="border: 1px solid black">Your browser is not support HTML 5!</canvas>
            <script type="text/javascript">
                var paint=document.getElementById('hua');
                var hua=paint.getContext('2d');
                function createStar(context,n,dx,dy,size){
                    context.beginPath();
                    for(var i=0;i<n;i++){
                        var dig=Math.PI*4/n;
                        var x=Math.sin(i*dig);
                        var y=Math.cos(i*dig);
                        context.lineTo(x*size+dx,dy+y*size);
                    }
                    context.closePath();
                }
                createStar(hua,3,20,50,20);
                hua.fillStyle='#f00';
                hua.fill();
                createStar(hua,5,50,50,20);
                hua.fillStyle='#f00';
                hua.fill();
                createStar(hua,9,150,50,50);
                hua.fillStyle='#0f0';
                hua.fill();
            </script>
            <canvas id='transl' height="1400" width="1400"></canvas>
            <script type='text/javascript'>
                var paint=document.getElementById('transl');
                var hua=paint.getContext('2d');
                hua.fillStyle='rgba(255,0,0,0.5)';
                hua.translate(0,300)
                for (var i=0;i<150;i++){
                    hua.translate(50,50);
                    hua.scale(0.95,0.95);
                    hua.rotate(-Math.PI/12);
                    hua.fillRect(0,0,150,75);
                }
            </script>
        </div>
    </body>
</html>
